
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns:th="www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>客房情况</title>
<link href="../../../css/main.css" rel="stylesheet" type="text/css">
    <link href="../../../bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../../../bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" class="tabe_div">

    <p class="p_line text_ient">
        <a class="find_a">名称：</a>
        <input type="text" v-model="name" class="form_input text_ient" placeholder="输入名称"/>
        <a  class="find_a">类型：</a>
        <template>
            <el-select v-model="flid" filterable placeholder="请选择">
                <el-option
                        v-for="g in flname"
                        :key="g.cid"
                        :label="g.cname"
                        :value="g.cid">
                </el-option>
            </el-select>
        </template>

    <input style="position:absolute;z-index:1;margin-left: 14%;" type="button" @click="getgoods()" value="查询" class="but_find"/><p>
    <p class="p_table">
    <a href="#" class="a_add" id="add_box" @click="dialogFormVisible = true;">添加</a>
    <a href="#" class="a_add">全部导出</a>
</p>

    <template>
        <el-table ref="adminTable"
                  :data="goods"
                  style="width: 100%;">
            <el-table-column
                    fixed
                    prop="id"
                    label="序号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="cname"
                    label="所属分类"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="商品名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="points"
                    label="商品积分"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="image"
                    label="主图"
                    width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.image" height="90" width="100">
                </template>
            </el-table-column>
            <el-table-column
                    prop="image_album"
                    label="详情图片"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop=""
                    label="上架状态"
                    width="120">
                <template slot-scope="scope">
                    {{scope.row.grd== 1 ? '未上架':'已上架'}}</template>
            </el-table-column>
            <el-table-column
                    prop=""
                    label="审核状态"
                    width="120">
                <template slot-scope="scope">{{scope.row.sgrd== 1 ? '已审核':'未审核'}}</template>
            </el-table-column>

            <el-table-column
                    prop="sales"
                    label="销量"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="stock"
                    label="库存"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="市场单价"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="discount_price"
                    label="优惠价"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="amount"
                    label="数量单位"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click.prevent="handupdate(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click.prevent="updatedel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </template>
    <div class="col-md-12">
        <div class="text-center">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total" @current-change="getgoods" page-size="10">
            </el-pagination>
        </div>
    </div>
    <el-dialog title="商品信息编辑" :visible.sync="dialogFormVisible">
        <el-form >
            <el-form-item label="商品名称" label-width="150px">
                <el-input v-model="good.name" autocomlete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属分类" :label-width="150">
                <template>
                    <el-select v-model="good.oid" filterable placeholder="请选择">
                        <el-option
                                v-for="g in flname"
                                :key="g.cid"
                                :label="g.cname"
                                :value="g.cid">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="商品积分" :label-width="150">
                <el-input v-model="good.points" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="主图" :label-width="150">
                <el-input v-model="good.image" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="详情图片" :label-width="150">
                <el-input v-model="good.image_album" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上架状态" :label-width="100">
<!--                <el-input v-model="good.grd" autocomplete="off">-->
                <select class="form_select" style="padding-left: 1%;" v-model="good.grd">
                    <option value="1" selected>未上架</option>
                    <option value="0">已上架</option>
                </select>
<!--                </el-input>-->
            </el-form-item>
            <el-form-item label="审核状态" :label-width="100">
<!--                <el-input v-model="good.sgrd" autocomplete="off">-->
                    <select class="form_select" style="padding-left: 1%;" v-model="good.sgrd">
                        <option value="1">已审核</option>
                        <option value="0">未审核</option>
                    </select>
<!--                </el-input>-->
            </el-form-item>
            <el-form-item label="销量" :label-width="150">
                <el-input v-model="good.sales" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存" :label-width="150">
                <el-input v-model="good.stock" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="市场单价" :label-width="150">
                <el-input v-model="good.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="优惠价" :label-width="150">
                <el-input v-model="good.discount_price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="数量单位" :label-width="150">
                <el-input v-model="good.amount" autocomplete="off"></el-input>
            </el-form-item>
            <!--                <el-form-item label="出版日期" :label-width="150">-->
            <!--                    <el-date-picker v-model="editBook.date" type="date" placeholder="选择日期"-->
            <!--                                    format="yyyy-MM-dd" value-format="yyyy-MM-dd">-->
            <!--                    </el-date-picker>-->
            <!--                </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="inorup()">确 定</el-button>
        </div>
    </el-dialog>


</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            flname : "",
            good:{
                id :"", oid : null,
                name : "", points : 0,
                image : "", image_album : "",
                del : 1, grd : 0,
                sgrd : 1, sales : 0,
                stock : 0, price : 0,
                discount_price : 0,
            },
            goods:"",
            flid : "",
            total:"",
            name:"",
            cname:"",
            dialogFormVisible : false,
        },
        created(){
           this.getgoods();
           this.getflname();
        },
        methods: {
            inorup(){
                if(this.good.id==""){
                    this.insertGood();
                }else {
                    this.updateGood();
                }
            },
            getflname(){
                axios.get("cs-manage/chaoshi/pmsFenlei3/selectFlname").then(res=>{
                    this.flname=res.data.records;
                });
            },
            getgoods(page){
                page = page || 1;
                let url = "cs-manage/chaoshi/pmsGoods/selectGoods?page="+page;
                if(this.name){
                    url +="&name=" + this.name
                }
                if(this.flid !=""){
                    url +="&oid=" + this.flid
                }
                axios.get(url).then(res=>{
                    this.goods=res.data.records;
                    this.total = res.data.total;
                    console.log(this.goods)
                });
            },
            updatedel(row){
                let url = "cs-manage/chaoshi/pmsGoods/updatedel?id="+row.id;
                this.$confirm('是否要删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    axios.get(url).then(res=>{
                        console.log(res.data.message)
                        this.$message({
                            message: "删除成功"
                        });
                        this.getgoods();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                })
            },
            handupdate(row){
                console.log(row)
                this.good=row;
                this.dialogFormVisible=true;
            },
            updateGood(){
                console.log(this.good.id)
                let url = "cs-manage/chaoshi/pmsGoods/updateGoods?oid="+this.good.oid+"&name="+this.good.name+
                    "&points="+this.good.points+ "&image="+this.good.image+
                    "&image_album="+this.good.image_album+"&del=" +this.good.del+
                    "&grd="+this.good.grd+"&sgrd="+this.good.sgrd+
                    "&sales="+this.good.sales+"&stock="+this.good.stock+
                    "&price="+this.good.price+"&discount_price="+this.good.discount_price+"&id="+this.good.id;
                axios.get(url).then(res=>{
                    console.log(res.data.message)
                    this.$message({
                        message: "修改成功"
                    });
                    this.getgoods();
                })
            },
            handinsert(){
                dialogFormVisible=true;
            },
            insertGood(){
                console.log(this.good.id)
                let url = "cs-manage/chaoshi/pmsGoods/insertGoods?oid="+this.good.oid+"&name="+this.good.name+
                    "&points="+this.good.points+ "&image="+this.good.image+
                    "&image_album="+this.good.image_album+"&del=" +this.good.del+
                    "&grd="+this.good.grd+"&sgrd="+this.good.sgrd+
                    "&sales="+this.good.sales+"&stock="+this.good.stock+
                    "&price="+this.good.price+"&discount_price="+this.good.discount_price;
                axios.get(url).then(res=>{
                    console.log(res.data.message)
                    this.$message({
                        message: "添加成功"
                    });
                    this.getgoods();
                })
            }
        }
    })
</script>
</body>
</html>
